<template>
  <el-aside style="width: 250px;background-color: #545c64">
    <div style="    display: flex;justify-content: center;align-items: center;height: 60px;">
      <div class="logo-image"></div>
    </div>
    <el-menu
        active-text-color="#75CB00"
        background-color="#545c64"
        text-color="#fff"
        :router="true">
      <template v-for="item in menuList">
        <!--二级菜单-->
        <el-sub-menu v-if="item.subMenu !==null && item.subMenu.length !==0"
                     :index="item.menuId + '-' + item.menuId"
                     :key="item.menuId"
                     >
          <template #title>
            <component class="icons" :is="item.menuIcon"></component>
            <span>{{item.menuName}}</span>
          </template>
          <el-menu-item v-for="submenu in item.subMenu"
                        :index="submenu.menuPath"
                        :key="submenu.menuId"
                        @click="clickMenu(submenu)"
                        >
            <component class="icons" :is="submenu.menuIcon"></component>
            <span>{{submenu.menuName}}</span>
          </el-menu-item>
        </el-sub-menu>
        <!--一级菜单-->
        <el-menu-item v-else :index="item.menuPath" :key="item.menuId" @click="clickMenu(item)">
          <template #title>
            <component class="icons" :is="item.menuIcon"></component>
            <span>{{item.menuName}}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>

<script>
/*import {ElMessage} from "element-plus";*/

export default {
  name: "M" +
      "menu",
  data() {
    return {
      menuList: [],
      msg: ''
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      this.axios.get('/menuController/asideMenus').then(res => {
        if(res.data.code !== 200) {
          console.log('error')
          return false
        }
        this.menuList = res.data.data//从数据库中获取菜单列表
        console.log(res.data.data)
      })
    },
    clickMenu(item) {
      this.$store.commit('selectMenu',item)
    }
  }
}
</script>

<style scoped>
.icons {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
.logo-image {
  width: 65%;
  height: 55%;
  background: url("@/assets/logo5.png") no-repeat;
  background-size: cover;
}
</style>
